<template>
	<view class="ulist">
		<view class="item " v-for="(item,index) in data.ulist" :key="index" @click="go(item)">
			<view class="image">
				<image :src="item.image_text" mode="aspectFill"></image>
				<view class="adstime">
					{{formatDuration(item.video_time)}}
				</view>
			</view>
			<view class="right">
				<view class="title">
					{{item.title}}
				</view>
				<view class="ttt">
					已观看{{formatDuration(item.sss)}}
				</view>
			</view>
		</view>
	</view>
	<view class="k1" v-if="data.ulist.length == 0">
		<image src="/static/bkong.png" mode=""></image>
		<view class="texts">
			暂无内容
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		courselog
	} from '@/common/http.api.js';
import { match } from 'assert';


	const data = reactive({
		params: {
			page: 1,
			limit: 10,
		},
		ulist: []
	})
	onReachBottom(() => {
		data.params.page++
		courselog(data.params).then(res => {
			data.ulist.push(...res.data)
		})
	})

	function formatDuration(seconds) {
		let showHours = true
		if (isNaN(seconds) || seconds < 0) return '00:00'
		const hours = Math.floor(seconds / 3600)
		const minutes = Math.floor((seconds % 3600) / 60)
		const remainingSeconds = seconds % 60
		// 补零函数
		const pad = n => n.toString().padStart(2, '0')
		return showHours || hours > 0 ?
			`${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}` :
			`${pad(minutes + hours * 60)}:${pad(remainingSeconds)}`
	}
	onLoad(() => {
		courselog(data.params).then(res => {
			console.log(res);
			data.ulist.push(...res.data)
		})
	})
	function go(item) {
		uni.navigateTo({
			url: `/pages/knowledge/knowledgedetail?id=${item.cate_id}&videoId=${item.id}`
		})
	}
</script>

<style lang="scss">
	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.ulist {
		padding: 20rpx;
		box-sizing: border-box;

		.item {
			width: 710rpx;
			margin: 20rpx auto;
			display: flex;

			.image {
				width: 240rpx;
				height: 160rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					width: 240rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}

				.adstime {
					height: 30rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					padding: 0rpx 10rpx;
				}
			}

			.right {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				.ttt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
				}
			}
		}
	}
</style>